import { Empty, SwipeAction, Toast } from 'antd-mobile'
import styles from './BillList.module.scss' 
import {ItemDataStore} from '@/store/useItemStore'
import {getMoney} from '@/utils/money'
import { useMemo } from 'react'
import dayjs from 'dayjs'
import { cFetch } from '@/lib/Http'
import { useScrollLoadRef } from '@/hooks/scrollLoad'
import {useItemStore, ItemStore, ItemType} from '@/store/useItemStore'
export default function BillList (props: {
  storeDate: ItemDataStore,
  balance: BalanceType,
  dateParam: ItemListDateParam,
  storeType: ItemType
}){
  const listData = useMemo(() => {
    return props.storeDate.items
  }, [props.storeDate.items])
  const hasMore = useMemo(() => {
    return props.storeDate.hasMore
  }, [props.storeDate.hasMore])
  const convertDate = (date: string) => {
    return dayjs(date).format('YYYY-MM-DD');
  }
  const handleDeleteItem = async (id: number, index: number) => {
    await cFetch.delete<Resource<Tag>>(
      `/item/${id}`)
      .then(res=>{
        props.storeDate.items.splice(index,1)
        Toast.show({ icon: 'success', content: res.msg })
      })
  }
  const {fetchMore} = useItemStore() as ItemStore;
  const ref = useScrollLoadRef(
    { 
      state: hasMore,
      fn: ()=>fetchMore(props.storeType, props.dateParam.happened_after, props.dateParam.happened_before) }, 
    { root: null, threshold: 1.0, }
  )
  return (
    <div className={styles.billListWrap}>
      {listData.length > 0 ?
        <section>
          <header>
            <div className={styles.balanceBox}>
              <div className={styles.income}>
                <span>收入</span>
                <span>{getMoney(props.balance.income)}</span>
              </div>
              <div className={styles.expenses}>
                <span>支出</span>
                <span>{getMoney(props.balance.expenses)}</span>
              </div>
              <div className={styles.balance}>
                <span>净收入</span>
                <span>{getMoney(props.balance.balance)}</span>
              </div>
            </div>
          </header>
          <main>
            <ul>
              {listData.map((item,iIndex) =>{
                return <li key={item.id}>
                  <SwipeAction
                    key={item.id}
                    rightActions={[
                      {
                        key: 'delete',
                        text: '删除',
                        onClick: async () => await handleDeleteItem(item.id, iIndex),
                        color: 'danger'
                      }
                    ]}
                  >
                    <div className="icon">
                      {item.tag.sign}
                    </div>
                    <div className="detail">
                      <div className="message">
                        <span>{item.tag.name}</span>
                        <span className="sub">{convertDate(item.happen_at)}</span>
                      </div>
                      <div className="amount">
                        ¥<span>{ getMoney(item.amount)}</span>
                      </div>
                    </div>
                  </SwipeAction>
                </li>
              })}
              <li className={styles.bottomFuncRow}>
                {hasMore && <span ref={ref}>显示更多...</span>}
                {/* <span>显示更多.loading动画</span> */}
                {!hasMore && listData.length > 25 && <span>到底部啦</span>}
              </li>
            </ul>
          </main>
        </section>
        :
        <Empty description='暂无数据' />
      }
    </div>
  )
}